<template>
  <!--订单 用户相关 汇总统计-->
  <div >
    <Row style="text-align: right" class="y_query_right">
      <DatePicker type="date" v-model="searchParams.choosedStartDate" :options="dateRange" placeholder="起始时间" style="width: 150px" ></DatePicker>
      -  <DatePicker type="date" v-model="searchParams.choosedEndDate" placeholder="结束时间" style="width: 150px" class="y_condition"></DatePicker>
      <Button type="primary" icon="ios-search" style="margin-left: 1rem" @click="webSearch" class="y_condition">Search</Button>
    </Row>
    <hr>

    <div class="flex-row-wrap">
      <TiySectionChart title="订单汇总" :desc="status.searchedDateDesc"></TiySectionChart>
      <TiyNumberChart :chat-data="order.number" title="订单总数量" unit="单"></TiyNumberChart>
      <TiyNumberChart :chat-data="order.amount"></TiyNumberChart>
      <TiyNumberChart :chat-data="order.product" title="订单中产品SKU" unit="件"></TiyNumberChart>
    </div>
    <div class="flex-row-wrap">

      <TiyPieChart title="订单设备分布" :chat-data="order.devices" width="18rem" height="18rem" :setting="{ radius: 80, offsetY: 150}" ></TiyPieChart>
<!--      <TiyPieChart title="快递方式分布" :chat-data="order.shippings" width="18rem" height="18rem" :setting="{ radius: 80, offsetY: 150}" ></TiyPieChart>-->
      <TiyPieChart title="订单国家分布" :chat-data="order.countries" :width="this.$yMobile()?'18rem':'350px'" :height="this.$yMobile()?'18rem':'350px'" :setting="{ radius: 80, offsetY: 150,legendLimit:6}" ></TiyPieChart>
      <TiyPieChart title="下单时的登录方式" :chat-data="order.loginTypes" width="18rem" height="18rem" :setting="{ radius: 80, offsetY: 150}" ></TiyPieChart>

      <TiyHistogramChart title="下单时段分布" :chat-data="order.timeRanges"  :width="this.$yMobile()?'18rem':'600px'" desc="横轴：时间 纵轴：订单数"></TiyHistogramChart>
      <TiyBarChart title="产品分类分布" :chat-data="order.productCategories"  :width="this.$yMobile()?'18rem':'50rem'"  :height="this.$yMobile()?'24rem':'30rem'" desc="横轴：分类 纵轴：订单数"></TiyBarChart>

    </div>


    <div  class="flex-row-wrap">
      <TiySectionChart title="用户汇总" :desc="status.searchedDateDesc"></TiySectionChart>
      <TiyNumberChart :chat-data="user.number" title="注册用户总数量" unit="人"></TiyNumberChart>
    </div>
    <div class="flex-row-wrap">
      <TiyPieChart title="注册方式分布" :chat-data="user.loginTypes" width="18rem" height="18rem" :setting="{ radius: 80, offsetY: 150}" ></TiyPieChart>
      <TiyPieChart title="国家分布" :chat-data="user.countries" width="18rem" height="18rem" :setting="{ radius: 80, offsetY: 150,legendLimit:6}" ></TiyPieChart>

    </div>

    </div>
</template>

<script>

  import TiyNumberChart from "../widgets/chart/TiyNumberChart";
  import TiyPieChart from "../widgets/chart/TiyPieChart";
  import TiySectionChart from "../widgets/chart/TiySectionChart";
  import TiyHistogramChart from "../widgets/chart/TiyHistogramChart";
  import TiyBarChart from "../widgets/chart/TiyBarChart";
  import tiyData from "./js/orderUserCollect/orderUserCollect_data";
  import {
    init,
    searchOrderCollect,
    searchUserCollect
  } from "./js/orderUserCollect/orderUserCollect_funs";

  export default {
    components: {TiyBarChart, TiyHistogramChart, TiySectionChart, TiyPieChart, TiyNumberChart},
    data () {
      return {
        searchParams: tiyData.tParams.searchParams,
        status: tiyData.tStatus,
        order:tiyData.tData.order,
        user:tiyData.tData.user,
        dateRange:tiyData.tData.dateRange,
    }
  },

    methods:{
      webSearch(){
        searchOrderCollect(this, tiyData)
        searchUserCollect(this, tiyData)
      },

    },
    created() {
      init(tiyData)
      searchOrderCollect(this, tiyData)
      searchUserCollect(this, tiyData)
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
  @import  (once,optional)  "../css/base";


  .flex-row-wrap{
    display: flex;flex-direction: row;flex-wrap: wrap
  }

</style>
